<template>
  <div>
    <!-- <div class="sys-title">登录</div> -->
    <div class="sys-login">
      <el-form ref="loginform" status-icon :model="form" :rules="loginrules" >
        <!-- <el-form-item  prop="group"> -->
          <h3>登录</h3>
        <!-- </el-form-item> -->
        <el-form-item  prop="group">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              {{selectGroup}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <template v-for="group in groups">
                <el-dropdown-item :command="group.id">{{group.name}}</el-dropdown-item>
              </template>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item  prop="username">
          <el-input v-model="form.username" @blur="getGroup" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit" style="width:100%">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import Services from '@/services'
import Util from '@/libs/util'
export default {
  data(){
    var validateUserName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'));
      } else {
        callback();
      }
    };
    var validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        callback();
      }
    };
    return{
      form: {
        groupid: 0,
        username: '',
        password: ''
      },
      redirect: '/',
      groups:[
        {
          id: 0,
          name: '请选择用户组'
        }
      ],
      loginrules: {
        username: [
          { validator: validateUserName, trigger: 'blur' }
        ],
        password: [
          { validator: validatePassword, trigger: 'blur' }
        ]
      }

    }
  },
  created(){
    if(this.$route.query.redirect){
        this.redirect = this.$route.query.redirect
    }
  },
  computed:{
    selectGroup(){
      let name = ''
      this.groups.forEach(group => {
        if(group.id == this.form.groupid){
          name = group.name
        }
      })
      return name
    }
  },
  methods:{
    handleCommand(id) {
      this.form.groupid = id 
    },
    getGroup(){
      if(this.form.username) {
        Services.USER_GROUP({
          username: this.form.username
        }).then(res => {
          this.groups = [
            ...res.list
          ]
          this.form.groupid = res.list[0].id
        })
      }
    },
    submit(){
      this.$refs.loginform.validate((valid) => {
        if (valid) {
          Services.USER_LOGIN(this.form).then(res => {
            if(res.code == 0){
              // Util.setStore('userId', res.userInfo.userId)
              // Util.setStore('username', res.userInfo.username)
              // Util.setStore('name', res.userInfo.name)
              // Util.setStore('email', res.userInfo.email)
              Util.setStore('token', res.data.token)
              // Util.setStore('groupid', this.form.groupid)
              // Util.setStore('isfirst', res.userInfo.isfirst)
              this.$router.replace({
                  path: this.redirect
              })
            }
          })
        } else {
          return false;
        }
      });
    }
  }
}
</script>
<style lang="scss">
  .sys-login{
    position: absolute;
    background: #fff;
    width: 30%;
    left: 35%;
    top: 20%;
    text-align: center;
    padding: 40px 40px;
    box-sizing: border-box;
  }
</style>
